<template>
    <van-nav-bar title="商品分类" />
    <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        input-align="center"
        />
    <van-row>
        <van-col span="6">
            <p>手机数码</p>
            <p>家用电器</p>
            <p>男装</p>
            <p>男装</p>
            <p>钟表</p>
            <p>蔬菜</p>
            <p>男装</p>
        </van-col>
        <van-col span="18">
            <div class="list">
                <div>
                    <img src="../assets/mi-logo.png" alt="">
                    <p>小米</p>
                </div>
                <div>
                    <img src="../assets/mi-logo.png" alt="">
                    <p>小米</p>
                </div>
                <div>
                    <img src="../assets/mi-logo.png" alt="">
                    <p>小米</p>
                </div>
                <div>
                    <img src="../assets/mi-logo.png" alt="">
                    <p>小米</p>
                </div>
            </div>
        </van-col>
    </van-row>
  <!-- 底部导航 -->
  <van-tabbar v-model="active">
    <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item to="/type" icon="search">分类</van-tabbar-item>
    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
    <van-tabbar-item to="/login" icon="setting-o">登录</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';
const value = ref("");

const active = ref(1);
</script>

<style scoped>
.list{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
.list > div{
    width: 33.33%;
    padding: 0 5px;
    box-sizing: border-box;
}
.list > div img{
    width: 100%;
}
</style>